import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Image, ScrollView } from 'react-native';
import PropTypes from 'prop-types';
import Modal from 'react-native-modal';

const UpdateModal = ({
  isVisible,
  style,
  getRef,
  onCancle,
  onSave,
  onEnd,
  onSelBin,
  progress,
  rprogress,
  updateArr,
  ...rest
}) => {
  //   const passRef = ref => {
  //     if (getRef) {
  //       getRef(ref);
  //     }
  //   };

  const [selIndex, setSelIndex] = useState(0);

  let showTip = '';
  switch (isVisible) {
    case 1:
      showTip = 'Please select the version to upgrade.';
      break;
    case 2:
      showTip = `Updating...${progress}%\nDo not disconnect or close.`;
      break;
    case 3:
      showTip = `Preparing to restore the factory settings\n Tip:Wait 30 seconds \nDo not disconnect or close.`;
      break;
    case 4:
      showTip = `Restrore Factory Settings...${rprogress}%\nDo not disconnect or close.`;
      break;
    case 5:
      showTip = 'Update completed\nPlease restart the vehicle';
      break;
    default:
      break;
  }

  const renderUpdateItem = ({ item, index }) => (
    // <ItemHRow
    //   key={index}
    //   data={item}
    //   clickAction={() => clickAtIndex(index)}
    // />
    <TouchableOpacity key={index} style={{ height: 40, justifyContent: 'space-around', alignItems: 'center', flexDirection: 'row' }}
      onPress={() => {
        setSelIndex(index)
        onSelBin(index)
      }}
    >
      <Text style={{ color: index == selIndex ? '#060606' : '#515151', fontSize: 16, fontFamily: 'Moldiv' }}>Version: {item.vNumber}</Text>
      <Image
        source={index == selIndex ? require('../images/icon_sselyes.png') : require('../images/icon_sselno.png')}
        style={{ height: 21, width: 21 }}
      />
    </TouchableOpacity>
  );

  return (
    <Modal
      isVisible={isVisible != 0}
      style={{
        // alignItems: 'center',
        // justifyContent: 'center',
      }}>
      <View
        style={{
          width: '100%',
          backgroundColor: '#DDDDDD',
          // borderRadius: 14, 
          alignItems: 'center',
        }}>

        <Image
          source={require('../images/icon_update.png')}
          style={{ marginTop: 40, height: 60, width: 60 }}
        />
        <Text style={{ marginTop: 10, color: '#060606', fontSize: 16, fontFamily: 'Moldiv', lineHeight: 30, fontWeight: '500', textAlign: 'center' }}>
          {showTip}
        </Text>
        {isVisible == 1 ?
          <ScrollView style={{ width: '60%' }}>
            {
              updateArr.map((item, index) => {
                return (renderUpdateItem({ item, index }))
              })
            }
          </ScrollView> : null
        }
        {isVisible == 1 ?
          <View
            style={{
              margin: 20,
              height: 44,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}>
            <TouchableOpacity
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                borderColor: '#000000',
                borderWidth: 1,
                marginRight: 10
              }}
              onPress={onSave}>
              <Text style={{ color: '#060606', fontSize: 16, fontFamily: 'Moldiv', fontWeight: '500' }}>Confirm</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#CFFF36' }}
              onPress={onCancle}>
              <Text style={{ color: '#060606', fontSize: 16, fontFamily: 'Moldiv', fontWeight: '500' }}>Cancel</Text>
            </TouchableOpacity>
          </View> :
          <View
            style={{
              margin: 20,
              height: 44,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}>
            {
              isVisible == 5 ? <TouchableOpacity
                style={{
                  flex: 1,
                  width: '50%',
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderColor: '#000000',
                  borderWidth: 1
                }}
                onPress={onEnd}>
                <Text style={{ color: '#060606', fontSize: 16, fontFamily: 'Moldiv', fontWeight: '500' }}>Ok</Text>
              </TouchableOpacity> : null
            }
          </View>
        }
      </View>
    </Modal>
  );
};

UpdateModal.defaultProps = {
  label: 'placeholder',
  unit: '',
};

UpdateModal.propTypes = {
  label: PropTypes.string,
  unit: PropTypes.string,
};

export default UpdateModal;
